<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="close">关闭</el-button>
            </div>

            <div class="table-form-box">
                <h3 class="h3">客户信息</h3>
                <el-form :model="ruleForm" ref="ruleForm">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <colgroup>
                            <col width="15%"/>
                            <col width="35%"/>
                            <col width="15%"/>
                            <col width="35%"/>
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="4">基本信息</td>
                            </tr>
                            <tr>
                                <td align="right"><span class="color-ff2200">*</span>客户名称</td>
                                <td> {{ruleForm.name}}</td>
                                <td align="right">
                                    客户简称:
                                </td>
                                <td>{{ruleForm.abbreviation}}</td>
                            </tr>
                            <tr>
                                <td align="right"><span class="color-ff2200">*</span>客户类型:</td>
                                <td>{{ruleForm.clientTypeName}}</td>
                                <td align="right"><span class="color-ff2200">*</span>所属行业:</td>
                                <td>{{ruleForm.industryName}}</td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>所属区域:
                                </td>
                                <td>{{ruleForm.regionName}}</td>
                                <td align="right"><span class="color-ff2200">*</span>公司规模:</td>
                                <td>{{ruleForm.scaleName}}</td>
                            </tr>
                            <tr>
                               <td align="right">
                                    <span class="color-ff2200">*</span>客户来源:
                                </td>
                                <td>{{ruleForm.sourceName}}</td>
                                <td align="right"><span class="color-ff2200">*</span>客户等级:</td>
                                <td>{{ruleForm.levelName}}</td>
                            </tr>
                            <tr>
                               <td align="right">
                                    人员规模:
                                </td>
                                <td>{{ruleForm.personTotal}}</td>
                                <td align="right">成立时间:</td>
                                <td>{{ruleForm.establishedTime}}</td>
                            </tr>
                            <tr>
                               <td align="right">
                                    客户简介:
                                </td>
                                <td>{{ruleForm.contactsDescription}}</td>
                                <td align="right">负责人:</td>
                                <td>{{ruleForm.repName}}</td>
                            </tr>
                            <tr>
                                <td align="right">备注:</td>
                                <td >{{ruleForm.remarks}}</td>
                                <td align="right">负责部门:</td>
                                <td >{{ruleForm.dutyDepartName}}</td>
                                
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                        <colgroup>
                            <col width="15%"/>
                            <col width="35%"/>
                            <col width="15%"/>
                            <col width="35%"/>
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">通讯信息</td>
                            </tr>
                            <tr>
                                <td align="right">电话</td>
                                <td>{{ruleForm.telphone}}</td>
                                <td align="right">
                                    手机:
                                </td>
                                <td>{{ruleForm.phone}}</td>
                            </tr>
                            <tr>
                                <td align="right">
                                    QQ:
                                </td>
                                <td>{{ruleForm.qq}}</td>
                                <td align="right">
                                    传真:
                                </td>
                                <td>{{ruleForm.fax}}</td>
                            </tr>
                            <tr>
                                <td align="right">email</td>
                                <td >{{ruleForm.email}}</td>
                                <td align="right">
                                    主页:
                                </td>
                                <td >{{ruleForm.homePageUrl}}</td>
                            </tr>
                             <tr>
                                <td align="right">省:</td>
                                <td>{{ruleForm.provinceName}}</td>
                                <td align="right">
                                    市:
                                </td>
                                <td>{{ruleForm.cityName}}</td>
                            </tr>
                            <tr>
                                <td align="right">
                                    区:
                                </td>
                                <td>{{ruleForm.areaName}}</td>
                                <td align="right">
                                    邮编:
                                </td>
                                <td>{{ruleForm.postNo}}</td>
                            </tr>
                            <tr>
                                <td align="right">联系人:</td>
                                <td>{{ruleForm.contactUser}}</td>
                                <td align="right">
                                    地址:
                                </td>
                                <td colspan="5">{{ruleForm.address}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                        <colgroup>
                            <col width="15%"/>
                            <col width="35%"/>
                            <col width="15%"/>
                            <col width="35%"/>
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">注册信息</td>
                            </tr>
                            <tr>
                                <td align="right">法人代表:</td>
                                <td>{{ruleForm.registerLegalPerson}}</td>
                                <td align="right">注册资本:</td>
                                <td>{{ruleForm.registerMoney}}</td>
                            </tr>
                            <tr>
                                <td align="right">注册地址:</td>
                                <td>{{ruleForm.registerAddress}}</td>
                                <td align="right">资产规模:</td>
                                <td>{{ruleForm.assetSize}}</td>
                            </tr>
                            <tr>
                                <td align="right">税务登记号:</td>
                                <td>{{ruleForm.registerTaxNumber}}</td>
                                <td align="right">一般纳税人:</td>
                                <td colspan="5">{{ruleForm.isGeneral ==1 ? '是' : '否' }}</td>
                                
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                        <colgroup>
                            <col width="10%"/>
                            <col width="15%"/>
                            <col width="10%"/>
                            <col width="15%"/>
                         
                            <col width="10%"/>
                            <col width="15%"/>
                            <col width="10%"/>
                            <col width="15%"/>
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">备注信息</td>
                            </tr>
                            <tr>
                                <td align="right">开户银行:</td>
                                <td>{{ruleForm.bankName}}</td>
                                <td align="right">开户名:</td>
                                <td>{{ruleForm.bankAccount}}</td>
                            </tr>
                            <tr>
                                <td align="right">银行账号:</td>
                                <td colspan="3">{{ruleForm.bankCardNo}}</td>
                            </tr>
                            <tr>
                                <td align="right">发票类型:</td>
                                <td>{{ruleForm.invoiceTypeName}} </td>
                                <td align="right">结算方式:</td>
                                <td>{{ruleForm.invoiceTypeName}}</td>
                            </tr>
                            <tr>
                                <td align="right">结算币种:</td>
                                <td>{{ruleForm.provinceName}}</td>
                                <td align="right">结算余额:</td>
                                <td>{{ruleForm.settlementBalance}}</td>
                            </tr>
                            <tr>
                                <td align="right">结算备注:</td>
                                <td colspan="7">{{ruleForm.settlementRemarks}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0" width="100%" cellpadding="0" cellspacing="1" class="mt20">
                         <colgroup>
                            <col width="15%"/>
                            <col width="85%"/>
                          
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="2">自定义属性</td>
                            </tr>
                            <tr v-for="(item, index) in customField" :key="index">
                                <td align="right">{{item.fieldName}}:</td>
                                <td>{{item.customFieldValue}}</td>
                            </tr>
                        </tbody>
                    </table>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script>
import appMain from '../../../utils/app_main';
import bus from '../../../components/common/bus'
export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            ruleForm: {
                abbreviation:'', // 往来单位简称
                address:'', // 地址信息
                areaId:'', // 区id
                areaName:'', //  区名
                assetSize:'', // 资产规模
                bankAccount:'', // 开户人
                bankCardNo:'', // 银行账号
                bankName:'', // 开户银行
                cityId:'', // 市id
                cityName:'', // 市名
                clientTypeId:'', // 客户类型id
                clientTypeName:'', // 客户类型民营企业私营企业
                clientTypeValue:'', // 客户类型值
                contactUser:'', // 联系人
                contactsDescription:'', // 往来单位介绍
                contactsTypeId:'', // 所属往来类别id
                contactsTypeName:'', // 所属往来类别名字
                customFieldValueDTOS: [], // 客户自定义字段列表,接口获取

                dutyDepartId: '', // 部门id
                dutyDepartName: '', // 部门名
                email:'', // 邮箱地址
                establishedTime:'', // 成立时间
                fax:'', // 传真
                homePageUrl:'', // 公司主页地址
                industryId:'', // 行业id
                industryName:'', // 行业名称
                industryValue:'', // 行业值
                invoiceBalance:'', // 发票结余
                invoiceTypeId:'', // 发票类型id
                invoiceTypeName:'', // 发票类型名称
                invoiceTypeValue:'', // 发票类型值
                isGeneral: false, // 是否为一般纳税人0是 1不是
                levelId:'', // 客户等级id
                levelName:'', // 客户等级名
                levelValue:'', // 客户等级值
                name:'', // 往来单位名称
                personTotal:'', // 人员规模(数量)
                phone:'', // 电话
                postNo:'', //  邮政编码
                provinceId:'', // 省id
                provinceName:'', // 省名   

                qq:'', // qq号码
                regionId:'', // 区域id
                regionName:'', // 区域名称
                registerAddress:'', // 注册地址
                registerLegalPerson:'', // 法人
                registerMoney:'', // 注册资金
                registerTaxNumber:'', // 税务登记号
                remarks:'', // 备注信息
                repDeptid:'', // 责任部门id
                repDeptName:'', // 责任部门名
                repId:'', // 责任人id
                repName:'', // 责任人
                scaleId:'', // 规模id
                scaleName:'', // 规模名
                scaleValue:'', // 规模值
                settlementBalance:'', // 结算余额
                settlementCurrencyId:'', // 结算币种id
                settlementCurrencyName:'', // 结算币种name
                settlementCurrencyValue:'', // 结算币种value
                settlementRemarks:'', // 结算备注相关
                settlementTypeId:'', // 结算方式id
                settlementTypeName:'', // 结算方式name
                settlementTypeValue:'', // 结算方式value

                sourceId:'', // 客户来源id
                sourceName:'', // 客户来源名
                sourceValue:'', // 客户来源值
                taxRate:'', // 税率
                telphone:'', // 固定电话
                // uploadReturns:[], // 附件列表
                vatNumber:'', // 增值税号
            },
            fileList: [],
            customField: [],
            flag: false
        };
    },
    methods: {
        clientInfoFindById(id) {
            appMain
                .clientInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.ruleForm = res.data.data;
                        // 客户自定义属性
                        let customField = [];
                        this.ruleForm.customFieldValueDTOS.map(item => {
                            let obj;
                            obj = _.cloneDeep(item);
                            obj.value = item.customFieldValue
                            customField.push(obj)
                        });
                        this.customField = customField;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                    this.flag = true;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        close () {
            bus.$emit('close_current_tags')
        }
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
    },
    created() {
        //如果有id过来就是修改的
        if (this.$route.query.id) {
            let id = this.$route.query.id;
            //通过id查询对应离职信息
            this.clientInfoFindById(id);
            //通过id查询附件信息
            this.uploadFileInfoFindById(id);
        } else {
            //新增操作
            this.flag = true;
        }
    }
};
</script>


<style  scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}
.table-form-box{
    padding-bottom: 100px;
}
.table-form-box table {
    background-color: #666;
}

.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    height: 36px;
    font-size: 12px;
}
.color-ff2200 {
    color: #ff2200;
}
</style>